<template>
  <div class="flex space-x-2">
    <button
      @click="switchLanguage('en')"
      class="px-3 py-1 bg-primary text-white rounded"
    >
      English
    </button>
    <button
      @click="switchLanguage('zh')"
      class="px-3 py-1 bg-primary text-white rounded"
    >
      中文
    </button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { watch } from 'vue'

const { locale } = useI18n({
  useScope: 'global'
})

console.log('Initial locale:', locale.value)

// 添加watch来监听locale变化
watch(locale, (newLocale) => {
  console.log('Locale changed to:', newLocale)
  localStorage.setItem('language', newLocale)
})

const switchLanguage = (lang: string) => {
  console.log('Attempting to switch to:', lang)
  // 直接修改locale.value来更改语言
  locale.value = lang
}
</script>
